<template>
    <view :class="$style.items">
        <view :class="$style.item">
            <template v-if="cover">
                <NetImage :class="$style.avatar" :src="cover" />
                <CircleClose :class="$style.del" @tap="delCover" />
            </template>
            <template v-else>
                <view :class="$style.icon">
                    <Uploader />
                </view>
                <nut-avatar-cropper edit-text="" @confirm="confirmCover"></nut-avatar-cropper>
            </template>
            <view :class="$style.zhengmian">正面照</view>
        </view>
        <view v-for="(item, i) in albums" :key="i" :class="$style.item">
            <NetImage :class="$style.pic" :src="item" />
            <CircleClose :class="$style.del" @tap="del(i)" />
        </view>
        <view :class="$style.item">
            <view :class="$style.icon">
                <Uploader />
            </view>
            <nut-avatar-cropper edit-text="" @confirm="confirmAlbums"></nut-avatar-cropper>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { Uploader, CircleClose } from '@nutui/icons-vue-taro';
    import { ref } from 'vue';
    import { showLoading, hideLoading, showToast, showModal } from '@/utils/framework'
    import { delAlbumsApi, uploadAlbumsApi, uploadAvatarApi } from '@/api/User';
    import NetImage from '@/components/NetImage.vue'


    let cover = ref('')
    let albums = ref<string[]>([])

    async function confirmCover(e) {
        showLoading()
        const r = await uploadAvatarApi(e)
        hideLoading()
        if(r.success) {
            cover.value = r.data
        }else {
            showToast('上传失败')
        }
    }

    async function confirmAlbums(e) {console.log(e)
        showLoading()
        const r = await uploadAlbumsApi(e)
        hideLoading()
        if(r.success) {
            albums.value.push(r.data)
        }else {
            showToast('上传失败')
        }
        
    }

    function delCover() {
        cover.value = ''
    }

    async function del(index:number) {
        showModal({
            content : '确定删除吗',
            async success(r) {
                if(r.confirm) {
                    showLoading()
                    const r = await delAlbumsApi(index)
                    hideLoading()
                    if(r.success) {
                        albums.value.splice(index, 1)
                    }else {
                        showToast('删除失败')
                    }
                }
            }
        })
    }

</script>

<style lang="scss" module>
page{
    background-color: $page-background-color;
}
.items{
    padding: $space;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: $space; /* 行间隙 */  
    column-gap: $space;

    .item{
        aspect-ratio: 1/1; /* 设置宽高比为1:1，形成正方形 */ 
        background-color: #fff;
        border-radius: 10px;

        position: relative;
    }

    .zhengmian{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        line-height: 60px;
        color: #fff;
        font-size: 24px;
        text-align: center;
        background-color: rgba($color: $primary-color, $alpha: 0.6);
        z-index: 2;
    }

    .icon{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    :global(.nut-avatar-cropper) {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 3;
    }

    :global(.nut-avatar-cropper__edit-text){
        background-color: transparent;
    }

}

.avatar{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    border-radius: 10px;
}


.pic{
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 10px;
}

.del{
    position: absolute;
    z-index: 3;
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
}
</style>